<template>
	<view class="py-12 px-20 text-white pb-safe-area">
		<view class="w-p-100 h-110 hy flex px-14 flex-y-center gap-8"
			:style="`background-image: url('${system.domain}/app/ycSora/image/hy1.png');`">
			<view class="w-60 h-60 round-circle">
				<image :src="USERINFO?.avatar" class="w-p-100 h-p-100 round-circle"></image>
			</view>
			<view class="flex flex-column gap-10 text-brown-1">
				<text class="fs-20 fw-600 text-ellipsis-1">{{USERINFO?.nickname}}</text>
				<text
					class="fs-12">{{USERINFO?.level==0?'你还未开通会员':'VIP到期时间：'+$tool.formatTimestamp(USERINFO?.expired_time)}}</text>
			</view>
		</view>
		<view class="mt-24">
			<view>选择套餐</view>
			<scroll-view scroll-x class="x mt-12">
				<view class=" block mr-10" v-for="(item,index) in list" @click="detail=item" :id="`plan`+item.id"
					style="width:105px;">
					<view class="hy flex py-15 gap-6   flex-column flex-y-center"
						:style="`background-image: url('${system.domain}/app/ycSora/image/${item.id==detail.id?'plans':'plan'}.png');`">
						<view :class="detail.id==item.id?'select':'no'" class="fs-20 fw-600 text-ellipsis-1">
							{{item.level==1?'月卡':item.level==2?'季卡':'年卡'}}
						</view>
						<view :class="detail.id==item.id?'select':'no'" class="fs-12">(限时特惠)</view>
						<view class="flex fw-600 flex-x-center flex-y-baseline mt-6"
							:class="detail.id==item.id?'select':'text-white'">
							<text class="fs-12">￥</text>
							<text class="fs-19">{{item.price}}</text>
						</view>
						<text class="text-666 fs-14 text-s">￥{{item.original_price}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="mt-24">
			<y-divider>
				<text class="fs-18">你将会得到</text>
			</y-divider>

			<view class="bg-black-1 round-8 py-12 px-15 flex flex-y-center gap-12 mt-12">
				<view class="icon round-circle">
					<image src="/static/image/cz.png" class="icon round-circle"></image>
				</view>
				<view class="flex flex-column gap-4">
					<view>
						视频创作
						<text style="color: #F1D1A4;">{{detail.give_productions}}</text>
						次
					</view>
					<text class="fs-14 text-999">赠送{{detail.give_productions}}次免费创作次数</text>
				</view>
			</view>
			<view class="bg-black-1 round-8 py-12 px-15 flex flex-y-center gap-12 mt-12">
				<view class="icon round-circle">
					<image src="/static/image/sl.png" class="icon round-circle"></image>
				</view>
				<view class="flex flex-column gap-4">
					<view>
						算力
						<text style="color: #F1D1A4;">{{detail.give_point}}</text>
						点
					</view>
					<text class="fs-14 text-999">赠送{{detail.give_point}}点免费算力</text>
				</view>
			</view>

			<view class="bg-black-1 round-8 py-12 px-15 flex flex-y-center gap-12 mt-12">
				<view class="icon round-circle">
					<image src="/static/image/js.png" class="icon round-circle"></image>
				</view>
				<view class="flex flex-column gap-4">
					<text>VIP加速通道</text>
					<text class="fs-14 text-999">生成视频速度更快</text>
				</view>
			</view>

			<view class="mt-20 bg-btn round-8 w-p-100 py-14 text-center" @click="createOrder()">
				￥{{detail.price}} 开通{{detail.level_id==1?'月卡':detail.level_id==2?'季卡':'年卡'}}
			</view>
			<view class="text-center fs-14 text-999 mt-10">
				开通会员代表接受<text class="text-blue-1" @click="$page.open('/pages/article/index?name=vip')">《会员服务协议》</text>
			</view>
		</view>
		<y-order-status ref="statusPopup" @result="payResult"></y-order-status>
	</view>
</template>

<script setup>
	import system from '@/utils/system';
	import { useRefs, useUserStore, useWebConfigStore } from '@/stores'
	import { onLoad } from '@dcloudio/uni-app'
	import { $http, $page, $tool } from '@/utils';
	import { pay } from '@/utils/pay';
	import { onMounted, ref } from 'vue';
	const { USERINFO } = useRefs(useUserStore());
	const statusPopup = ref(null)
	const list = ref([])
	const detail = ref({
		id: 0
	})
	const getList = () => {
		$http.get('Level/getList').then(res => {
			list.value = res.data
			detail.value = list.value[0]
		})
	}

	const createOrder = async () => {
		try {
			uni.showLoading({
				title: '创建订单中'
			})
			let source = 'official';
			// #ifdef MP-WEIXIN
			source = 'applet'
			// #endif

			const res = await $http.post('Order/createLevelOrder', { id: detail.value.id });
			const order = await pay(source, res.data.pay_data);
			statusPopup.value.start(res.data.order_id, 1);
		} catch (err) {
			$tool.toast('支付失败');
		}
	}
	const payResult = () => {
		setTimeout(() => {
			$page.redirect('/pages/user/index');
		}, 300)
	}
	onLoad(() => {
		getList()
	})
</script>

<style>
	.hy {
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.select {
		color: #1F1F39;
	}

	.bg-btn {
		background: linear-gradient(315deg, #CA9760 0%, #FFDBB5 100%);
		color: #1D1D1D;
		font-weight: 600;
	}


	.no {
		background: linear-gradient(180deg, #FFE3A3 0%, #FEEBCB 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.block {
		display: inline-block;
		width: 100%;
	}

	.x {
		white-space: nowrap;
	}

	.icon {
		width: 90rpx;
		height: 90rpx;
	}
</style>